<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
</head>
<body>
<div id="app">
	<comment-box @func="loadComment"></comment-box>
	<div class="container">
		<ul class="list-group">
			<li class="list-group-item" v-for="item in list" :key="item.id">
				<span class="badge">评论人： {{ item.user }}</span>
				{{ item.content }}
			</li>
		</ul>
	</div>
</div>
<template id="tmpl">
	<div class="container">
		<div class="form-group">
			<label>评论人：</label>
			<input type="text" class="form-control" v-model="user">
		</div>
		<div class="form-group">
			<label>评论内容：</label>
			<input type="text" class="form-control" v-model="content">
		</div>
		<div class="form-group">
			<input type="button" value="发表评论" class="btn btn-primary" @click="postComment">
		</div>
	</div>
</template>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
var storage_key = 'cmts'
var commentBox = {
	data:function(){
		return {user:'',content:''}
	},
	template:'#tmpl',
	methods:{
		postComment(){
			var comment = { id : Date.now(), user : this.user, content : this.content}
			var list = JSON.parse(localStorage.getItem(storage_key) || '[]')
			list.unshift(comment)
			localStorage.setItem(storage_key, JSON.stringify(list))
			this.user = this.content = ''
			this.$emit('func')
		}
	}
}
var app = new Vue({
	el:'#app',
	data:{
		list:[]
	},
	created(){
		this.loadComment();
	},
	methods:{
		loadComment(){
			this.list = JSON.parse(localStorage.getItem(storage_key) || '[]')
		}
	},
	components:{
		commentBox
	}
})
</script>
</body>
</html>